<template>
    <div>
        <breadcrumb></breadcrumb>
        <div class="main">
            <el-tabs v-model="activeName" class="mainTabs" @tab-click="handleClick">
                <el-tab-pane label="待调度订单" name="first">
                    <div class="main_item">
                        <waitDispatch></waitDispatch>
                    </div>

                </el-tab-pane>
                <el-tab-pane label="订单查询" name="second">
                    <div class="main_item">
                        <orderQuery></orderQuery>
                    </div>

                </el-tab-pane>

            </el-tabs>
        </div>


    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import waitDispatch from "./children/waitDispatch.vue";
import orderQuery from "./children/orderQuery.vue";


import httpApi from "@/http";
export default {
    data() {
        return {
            activeName: "first",
        };
    },
    methods: {
        defaultTabs() {
            if (this.$route.query.active) {
                this.activeName = this.$route.query.active
            }
        },


        handleClick(tab, event) {
            ////console.log(tab, event);
        }
    },
    mounted() {
        this.defaultTabs()

    },

    components: {
        breadcrumb,
        waitDispatch,
        orderQuery,

    },
};
</script>
  
<style lang="scss" scoped>
.main {
    .mainTabs {


        ::v-deep .el-tabs__nav {
            margin-left: 38px;
        }

        ::v-deep .el-tabs__nav-scroll {
            background-color: #fff;
        }

        // 标签页切换按钮
        ::v-deep .el-tabs__item {
            height: 50px;
            width: 88px;
            text-align: center;
            padding: 0;
            line-height: 50px;
            font-size: 12px;
            font-weight: bold;
            color: #939393;
        }

        // 下边框
        ::v-deep .el-tabs__nav-wrap::after {
            height: 1px;
            background-color: #F0F0F0;
        }

        // 标签页切换按钮 激活样式
        ::v-deep .el-tabs__item.is-active {
            background-color: #ECF5FE;
            color: #1890FF;
        }

        .main_item {
            padding: 0;
            background-color: #fff;
        }
    }

}
</style>
  